<html xmlns="">  
<head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
 <meta http-equiv="Content-Language" content="zh-CN" />  
 <meta name="roots" content="" />  
 <meta name="Keywords" content="" />  
 <meta name="Description" content="" />  
 <title>test_tab</title>  
 <style type="text/css">  
body,h2{
    margin:0;}
body{
    font-size:12px;
    font-family:"宋体",tahoma,arial;}
h2{
    height: 50px;
    margin: 100pxauto0;
    color: red;
    border-bottom: 1px solid #b7b7b7;}
h2 span{
    width:80px;
    height:50px;
    line-height:50px;
    text-align:center;
    float:left;}
#tab .tab{
    border: 1px solid #b7b7b7;
    border-bottom: 1px solid rgb(255, 255, 255);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding: 0 2px;
    background-color: #ffffff}
#ct div{
    height:300px;
    margin:0 auto;
    border:1px solid #b7b7b7;
    display:none;}
#ct .ct{
    display:block;}
 </style>  
 <script>  
function changetab(){
    var tabs=document.getElementById("tab").getElementsByTagName("span");//声明id为tab下所有的span
    for (i=0;i<tabs.length;i++){
        tabs[i].onclick=tab;//为每个span绑定onclick事件
    }
}

function tab(){
var  tabs=document.getElementById("tab").getElementsByTagName("span");//声明id为tab下所有的span
var  cts=document.getElementById("ct").getElementsByTagName("div");//声明所有的ct下的div
    for (i=0;i<tabs.length;i++){
    tabs[i].className="";
    cts[i].className="";
        if (tabs[i]==this){
            tabs[i].className="tab";
            cts[i].className="ct";
        }
    }
}
window.onload=function (){
    changetab();
}
</script>  
</head>  
<body>  
<h2 id="tab">
<span  class="tab">1</span>
<span>2</span>
</h2>
<div id="ct">
<div class="ct">
<img src="rsc/fd.png"  alt="上海鲜花港 - 郁金香" />

    11111111111111111111</div>
<div>222222222222222222</div>
</div>
</body>  
</html>  